import React, { useEffect, useState } from 'react';
import { Button, Modal, Checkbox, Form, Input, DatePicker, TimePicker } from 'antd';
import type { DatePickerProps, RangePickerProps } from 'antd/es/date-picker';

type Props = {
    closeModal: () => void
}

const OperationModal = ({ closeModal }: Props) => {

    const [form] = Form.useForm();
    useEffect(() => {
        const Initialize = {
            operationNum: 0,
            // dateStart: '年/月/日',
            // dateEnd: '年/月/日'
        }
        form.setFieldsValue(Initialize)
    }, [])
    const config = {
        rules: [{ type: 'object' as const, message: 'Please select time!' }],
    };
    const handleOk = () => {
        const res = form.getFieldsValue()
        console.log('res', res)
        closeModal()
    };

    const handleCancel = () => {
        closeModal()
    };

    const onOk = (value: DatePickerProps['value'] | RangePickerProps['value']) => {
        console.log('onOk: ', (value as any).$d);
    };

    return (
        <>
            <Modal title="加入秒杀" okText='确定' cancelText='取消' open={true} onOk={handleOk} onCancel={handleCancel}>
                <Form
                    name="basic"
                    labelCol={{ span: 8 }}
                    wrapperCol={{ span: 16 }}
                    form={form}
                    style={{ maxWidth: 600 }}
                    initialValues={{ remember: true }}
                    autoComplete="off"
                >
                    <Form.Item label="秒杀数量" name="operationNum" wrapperCol={{ span: 11 }}>
                        <Input type='number' />
                    </Form.Item>

                    <Form.Item name="dateStart" label="开始时间" {...config}>
                        <DatePicker showTime onOk={onOk} />
                    </Form.Item>

                    <Form.Item name="dateEnd" label="结束时间" {...config}>
                        <DatePicker showTime onOk={onOk} />
                    </Form.Item>
                </Form>
            </Modal>
        </>
    );
};

export default OperationModal;
